<template>
  <div class="container">
    <div class="upload-box">
      <div class="reset-back" v-show="isShowStepOne">
        <!-- 修改数据 -->
        <div class="link" @click="changLogData">{{$t('page.modData')}}</div>
        <!-- 清空数据 -->
        <span class="link" @click="handleRemove">{{$t('page.emptyData')}}</span>
      </div>
      <!-- 第一个上传 -->
      <div 
        v-show="isShowExcel === 'excel1' || isShowExcel === 'true'">
        <!-- <h4 
          v-show="isShowUpload"
          style="text-align: center;"
        >{{$t('page.entrance1')}}</h4> -->
        <el-upload 
          ref="rebateUpload"
          class="upload-demo"
          drag
          action="aa"
          name="excel"
          accept=".zip"
          :limit="1"
          :before-upload="beforeUpload"
          :headers="headerUpload"
          :http-request="UploadImage"
          :on-remove="removeFile1"
          :show-file-list="false"
          :on-error="handleError"
          v-show="isShowUpload">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">{{$t('page.drop')}}，<em>{{$t('page.click')}}</em></div>
        </el-upload>
        
        <div class="upload-name-box">
          <!-- 上传文件名字 -->
          <div class="upload-name"
            v-show="isShowUploadtxt">
            {{uploadFile.name }}
            <el-button type='text'
              @click="removeFile1()">x</el-button>
          </div>
          <!-- 加载进度条 -->
          <el-progress 
            :percentage="percentage"
            :color="customColor"
            v-show="isShowPer">
          </el-progress>
        </div>
      </div>

      <!-- 第二个上传 -->
      <!-- <UploadFile 
        ref="secondUpload"
        v-show="isShowExcel === 'excel2' || isShowExcel === 'true'"
        @uploadExcel2="uploadExcel2"
        @removeFile="removeFile"
      ></UploadFile> -->
    </div>
    <!-- 上传按钮 -->
    <div class="upload-btn">
      <el-button 
        v-if="!isShowStepOne"
        type="primary" 
        :loading="isLoading"
        @click="uploadHandler"
      >{{$t('page.uploadText')}}</el-button>
    </div>


    <div class="container-body"
         v-if="isShowStepOne">
      <template>
        <div class="title-space">
          <span>{{$t('page.ODvalue')}}：</span>
        </div>
        <div v-for="(listItem,listIndex) in tableList" :key="listIndex">
          <div class="overflow">
            <!-- 大 - 数据表格 -->
            <table id="table-1">

              <tr v-for="(table,key,index) in listItem"
                  :key="index">
                <td class="color-000">{{key!=='time'?key:$t('page.hole')}}</td>
                <td>
                  <span v-if="key!=='time'">
                    {{beforeLable[index-1]}}
                  </span>
                  <span class="color-000"
                        v-else>{{$t('page.mark')}}
                  </span>
                </td>
                <td>
                  <span v-if="key!=='time'">
                    {{waveName[index-1]}}
                  </span>
                  <span class="color-000"
                        v-else>{{$t('page.label')}}({{unit}})
                  </span>
                </td>
                <td v-for="(iTable, index) in table" :key="index">
                  <span v-if="key!=='time'">{{iTable}}</span>
                  <span class="color-000"
                        v-else>{{iTable + 's'}}</span>
                </td>
              </tr>
            </table>
          </div>

          <div class="space"
               v-if="dissType === 'v1'">
            <div class="title-space">
              <span>{{$t('page.ODrate')}}（%）： </span>
            </div>

            <div class="overflow"
                 v-for="lightRateItem,lightRateIndex in lightRate" :key="lightRateIndex">
              <table id="table-1">
                <tr v-for="(table,key,index) in lightRateItem"
                    :key="index">
                  <td class="color-000">{{key!=='time'?key:$t('page.hole')}}</td>
                  <td>
                    <span v-if="key!=='time'">
                      {{beforeLable[index-1]}}{{unit}}
                    </span>
                    <span class="color-000"
                          v-else>
                      {{$t('page.parameter')}}
                    </span>
                  </td>
                  <td v-for="(iTable, index) in table" :key="index">
                    <span v-if="key!=='time'">{{iTable}}</span>
                    <span class="color-000"
                          v-else>{{iTable + 's'}}</span>
                  </td>
                </tr>
              </table>
            </div>
          </div>

          <!-- 不知道什么用 -->
          <div class="space text-center">
            <template v-for="(chart,index) in allLightRateCharts">
              <div class="chart" :key="index">
                <wave-chart 
                  :id="'LightRate1'+index"
                  :data='chart'>
                </wave-chart>
              </div>
            </template>
          </div>

          <!-- 线型echarts -->
          <div class="line-box">
            <div class="space text-center">
              <linePointDiagram
                :value="originalData"
                @generateImg="shotImg(0, $event)"
              ></linePointDiagram>
            </div>

            <!-- 计算器部分 -->
            <div style="padding-top: 50px;">
              <div class="each-numberBox" v-for="(item, index) in waveName" :key="index">
                <div class="computed-text" :style="`color: ${colorList[index]}`">
                  <span :style="`backgroundColor: ${colorList[index]}`" class="computed-dot"></span>
                  {{item}}
                </div>
                <el-input-number 
                  style="margin-right: 10px;"
                  v-model="numList[index]" 
                  size="small"
                  :step="5">
                </el-input-number>
                <span style="white-space: nowrap;">{{timeMap[item] || ''}}</span>
              </div>
              <div style="margin-left: 84px;">
                <el-button 
                  type="primary"
                  size="small" 
                  :loading="isShowLoading"
                  @click="uploadNum(true)">{{$t('public.comfirmText')}}</el-button>
                <el-button 
                  size="small"
                  :loading="isResetLoading"
                  @click="uploadNum(false)"
                  >
                  {{$t('public.resetText')}}
                </el-button>
              </div>
            </div>

            <!-- 后面部分 -->
            <div style="padding-top: 50px;">
              <div class="each-numberBox" v-for="(item, index) in waveName" :key="index">
                <div class="computed-text">
                  <span v-if="index === 0">{{$t('page.start')}}</span>
                </div>
                <el-input-number 
                  style="margin-right: 10px;"
                  v-model="start[index]" 
                  size="small"
                  step-strictly
                  :step="6">
                </el-input-number>
              </div>
            </div>

            <div style="padding-top: 50px;">
              <div class="each-numberBox" v-for="(item, index) in waveName" :key="index">
                <div class="computed-text">
                  <span v-if="index === 0">{{$t('page.end')}}</span>
                </div>
                <el-input-number 
                  step-strictly
                  style="margin-right: 10px;"
                  v-model="end[index]" 
                  size="small"
                  :step="6">
                </el-input-number>
              </div>
            </div>
          </div>

        </div>

        <!-- 计算结果 -->
        <div class="title-space">
          <span>{{$t('page.calResultes')}}：</span>
          <el-button 
            type="text"
            @click="downloadExl()"
            size="mini">{{$t('page.export')}}</el-button>
        </div>
      
        <!-- 分子量标题 -->
        <div class="title-space">
          <span>{{$t('page.molecular')}}（Da）：</span>
          {{mole}}
        </div>

        <div class="space" v-show="isShowStepTwo">
          <div v-if="dissType === 'v1'">
            <div class="overflow step-two">
              <table id="table-1">
                <template v-for="(stepTwoItem) in stepTwoList">
                  <tr v-for="(table,key,index) in stepTwoItem" :key="index">
                    <td class="color-000" >
                      <span v-if="key!=='title'">{{key}}</span>
                      <span v-else>{{$t('page.hole')}}</span>
                    </td>
                    <td 
                      v-for="(iTable, iIndex) in table" 
                      :key="iIndex"
                      class="color-000">
                        <template v-if="key ==='title'">
                          <span v-html="iTable"></span>
                        </template>
                    </td>
                    <td 
                      v-for="(iTable, index) in table"
                      :key="index">
                        <template v-if="key !=='title'">
                          <span :style="{color:iTable===extA?'#409eff':''}"
                                v-if="iTable===extA"> ({{$t('page.recommended')}}){{iTable}}</span>
                          <span v-else> {{iTable}}</span>
                        </template>
                    </td>
                  </tr>
                </template>
              </table>
            </div>

            <div 
              class="img-list"
              v-for="img,index in imgList"
              :key="index"
              style="width:60%;float:left;">
                <div class="img-item">
                  <img :src="img" alt="" />
                </div>
            </div>

            <div style="width:40%;float:left;padding-left:50px;margin-top:25px;">
              <table id="table-2">
                <tr>
                  <td width="50%">
                    {{$t('page.formula')}}
                  </td>
                  <td>
                    y=x*Rmax/(x+KD)
                  </td>
                </tr>
                <tr>
                  <td width="50%">{{$t('page.parameter')}}</td>
                  <td>
                    <span class="data-item">Ka:{{parameter[1]}}</span>
                    <span class="data-item">Kd:{{parameter[2]}}</span>
                    <span class="data-item">KD:{{parameter[3]}}</span>
                  </td>
                </tr>

                <tr>
                  <td width="50%">{{$t('page.parameter')}}</td>
                  <td>
                    <span class="data-item">{{parameter[0]}}</span>
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div v-else>
            <!-- 分子量表格 - 底部数据计算结果 -->
            <div class="overflow">
              <table id="table-1">
                <template v-for="resValue,resIndex in paramResult">
                  <tr :key="resIndex">
                    <td v-for="v,k,i in resValue" :key="i"><span class="k">K</span>{{k.slice(1, 2)}}</td>
                  </tr>
                  <tr :key="resIndex">
                    <td v-for="v,k,i in resValue" :key="i">{{v}}</td>
                  </tr>
                </template>
              </table>
            </div>
          </div>

        </div>
      </template>

      <div class="space text-center">
      </div>
    </div>

    <!-- -输入配置参数数据-弹窗 -->
    <el-dialog 
      :visible.sync="isShowInputLog"
      :close-on-click-modal="false"
      width="90%"
      top="5%"
      center>
      <div>
        <!-- 公式选择 -->
        <div class="space space-unit">
          <div class="space-title">{{$t('page.formula')}}：</div>
          <el-radio-group v-model="formulaValue">
            <el-radio :label="0">{{$t('page.default')}}</el-radio>
            <el-radio :label="1">{{$t('page.newFormula')}}</el-radio>
          </el-radio-group>
        </div>

        <!-- 标签 -->
        <div 
          class="space"
          style="margin-bottom: 10px;">
          <div class="label-title">{{$t('page.mark')}}：</div>
          <table id="table-1">
            <tr>
              <td v-for="(table,index) in waveName"
                  :key="index"
                  width="100">
                <el-input type="text"
                  v-model="beforeLable[index]">
                </el-input>
              </td>
            </tr>
          </table>
        </div>

        <!-- 浓度 -->
        <div class="space">
          <div class="space-title">{{$t('page.label')}}({{unit}})：</div>
          <table id="table-1">
            <tr>
              <td v-for="(table,index) in waveName"
                  :key="index"
                  width="100">
                {{table}}
              </td>
            </tr>
          </table>
        </div>

        <div class="space text-center">
          <div class="title-space">
            <div class="space-title">{{$t('page.molecular')}}（Da）：</div>
            <el-input type="number"
              class="input"
              v-model="mole"
              style="width:500px;">
            </el-input>
          </div>
        </div>
        <!-- 是否归零 -->
        <div class="space space-unit">
          <div class="space-title">{{$t('page.zeroProcess')}}：</div>
          <el-radio v-model="zero" label='0'>{{$t('page.zero')}}</el-radio>
          <el-radio v-model="zero" label="1">{{$t('page.noZero')}}</el-radio>
        </div>

        <div class="space-btn">
          <el-button 
            type="primary"
            @click="handleCompute()"
            size="small"
            :loading="computeLoading"
            class="btn-submit-color">
              {{$t('page.submit')}}
          </el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import waveChart from '@/components/WaveChart'
import { fetchUploadExl, jhjlStep2, jhjlStep1 } from '@/api/table'
import { setStore, getStore } from '@/utils/common'
import { getToken } from '@/utils/auth'
import store from '@/store'
import { COLORLIST } from '@/utils/variate'
import linePointDiagram from '@/commonPage/linePointDiagram'
import { formatData } from '@/commonPage/linePointDiagram/formatData'

export default {
  data() {
    return {
      originalData: {},
      originalDataRate: [],
      lightRate: [],
      lightValue: [],
      stepTwoList: [],
      computeLoading: false, //显示计算loading
      computeAllowed: true, //防连点
      isShowInputLog: false, //是否显示公式
      isShowStepOne: false, //是否显示第一步表格
      isShowStepTwo: false, //是否显示第二步表格
      showScreenshotsImg: true, //页面上的曲线隐藏
      isShowUpload: true,
      isShowUploadtxt: false,
      uploadFile: {},
      mole: '115207373',
      unit: 'μg/ml',
      unitOption: ['pg/ml', 'ng/ml', 'μg/ml', 'mg/ml'],
      isShowPer: false,
      percentage: 0,
      customColor: '#e6a23c',
      allLightRateCharts: [],
      allStepOneCharts: [],
      isRepeatSubmit: false,
      extA: '',
      imgList: '',
      // operationTime: '',  // 运算时间
      // dissociationTime: '',  // 结合解离时间
      zero: '0',   // 是否归零
      lang: getStore('spr-lang') || 'zh', // 语言类型
      unitTitle: [],
      parameter: [],
      waveName: [],      // 浓度数据
      beforeLable: [],  // 标签数据
      baseStepOne: [],
      doDownload: false,
      paramResult: [],
      dissociation: [],
      dissType: '',
      formulaValue: 0, // 公式选择
      uploadExcel: {
        excel1: null, // 上传的第一个表格
        excel2: null, // 上传的第二个表格
      },
      isShowExcel: 'true', // 判断展示哪个上传
      isLoading: false, // 上传按钮loading
      resultValue: {},   // 计算之后的结果
      tooltipList: [],  // 用于echarts的tooltip数组
      colorList: COLORLIST, // 颜色列表
      numList: [], // 计算echarts图形数据
      count: 1,       // 用于监听执行次数
      isShowLoading: false, // 确认按钮loading
      isResetLoading: false, // 重置按钮loading
      timeMap: {}, // 时间的区间
      start: [],
      end: [],

      tableList: []
    }
  },
  components: {
    waveChart,
    linePointDiagram,
  },

  // 只有在弹窗提交完才会执行， 
  watch: {
    tooltipList: {
      handler(value) {
        if(this.count === 1) {
          this.resetNumbox()
          this.count = 22
        }
      }
    }
  },
  methods: {
    // echarts计数器: 确认/重置 按钮
    uploadNum(value) {
      if(value) {
        this.isShowLoading = true
      } else {
        this.isResetLoading = true
        this.resetNumbox()
      }
      this.handleCompute({
        isRepeatSubmit: true,
        tValue: this.numList,
        mobile: this.start.map((item, index) => [item, this.end[index]])
      })
    },

    // 初始化numBOX 初始化计数器 使其默认值都为0
    resetNumbox() {
      this.tooltipList.forEach((item, index) => {
        this.numList[index] = 0
        this.start[index] = 0
        this.end[index] = 0
      })
      this.$forceUpdate()
    },


    // 点击上传按钮
    async uploadHandler() {
      this.isLoading = true
      let formData = new FormData()
      formData.append('type', 'formData')
      let { excel1, excel2} = this.uploadExcel
      if(excel1 && excel2) {
        formData.append('excel', excel1)
        formData.append('excel1', excel2)
        // isShowExcel = 'true'
      } else if (excel1 || excel2) {
        for (const k in this.uploadExcel) {
          if (this.uploadExcel[k]) {
            this.isShowExcel = k
            formData.append('excel', this.uploadExcel[k])
          }
        }
      } else {
        this.isLoading = false
        return this.$message.warning('请先上传文件')
      }
      try{
        const res = await jhjlStep1(formData)
        this.uploadSuccess(res)
      }catch(err) {
        console.log(err);
      }
      this.isLoading = false
    },

    // 第一个上传
    UploadImage(data) {
      this.uploadExcel.excel1 = data.file
      this.percentage = 100
      setTimeout(() => {
        this.isShowPer = false
      }, 500)
    },

    /* 第二个上传回调 */
    uploadExcel2(value) {
      this.uploadExcel.excel2 = value
    },
    // 第二个上传移除文件
    removeFile() {
      if(this. isShowExcel !== 'true') {
        return this.handleRemove()
      }
      this.uploadExcel.excel2 = null
    },
    // 第一个移除文件
    removeFile1() {
      if(this. isShowExcel !== 'true') {
        return this.handleRemove()
      }
      this.$refs['rebateUpload'].clearFiles() //清除文件
      this.uploadExcel.excel1 = null  //清除文件
      this.uploadFile = {}
      // 是否显示上传组件
      this.isShowUpload = true
      // 文件名字
      this.isShowUploadtxt = false
      // 清空修改按钮
      // this.isShowStepOne = false
       //上传进度条
      this.percentage = 0
    },


    goNext(route, type) {
      if (type === 1) {
        setStore('chartData', this.lightRate)
      }
      this.$router.push({ path: route })
    },

    // 修改数据-点击出现弹窗
    changLogData() {
      this.isRepeatSubmit = true
      this.isShowInputLog = true
      this.doDownload = false
      // this.beforeLable = []
    },

    beforeUpload(file) {
      const isZip = file.name.endsWith('zip');
      if(!isZip) {
        return this.$message.error('上传文件仅支持zip格式')
      }
      this.uploadFile = file
      this.isShowPer = true   // 进度条
      this.isShowUpload = false  // 上传框隐藏
      this.isShowUploadtxt = true  // 显示文件名字
      this.percentage += 60 + Math.floor(Math.random() * 10)
    },
    uploadSuccess(file) {
      if (file.status === 200) {
        this.waveName = file.data.hole
        this.isShowInputLog = true

        setStore('auuid', file.data.uuid)
      } else {
        if (file.status === 502) {
          this.$msgbox
            .confirm(this.$t('page.msgBoxLoginOut'), this.$t('page.loginOut'), {
              confirmButtonText: this.$t('page.loginAgin'),
              cancelButtonText: this.$t('page.cancel'),
              type: 'warning',
            })
            .then(() => {
              store.dispatch('FedLogOut').then(() => {
                location.reload()
              })
            })
        } else {
          this.$message.error(file.msg)
        }
      }
    },

    // 上传失败
    handleError() {
      this.$message.error('上传失败')
    },

    /* 提交信息 */
    async handleCompute(data) {
      if (this.computeAllowed) {
        this.computeLoading = true
        this.showScreenshotsImg = true
        this.baseStepOne = []
        let info = null
        const lableList = this.waveName.map((item, index) => this.beforeLable[index] || null)
        // 请求参数
        const reqParams = {
          labValue: lableList,
          uuid: getStore('auuid'),
          mole: this.mole,
          zero: Number(this.zero),
          formulas: this.formulaValue,
          isRepeatSubmit: this.isRepeatSubmit,
          // jhTime: this.dissociationTime,
          // unit: this.unit,
          // runTime: this.operationTime,
        }

        if(data?.isRepeatSubmit) {
          reqParams.tvalue = data.tValue
          reqParams.isRepeatSubmit = data.isRepeatSubmit
          reqParams.mobile = data.mobile
        }
        try {
          info = await jhjlStep2(reqParams)
        } catch (err) {
          console.log(err);
        }
        if (info && info.status === 200) {
          this.paramResult = []
          this.originalData = {}
          // echarts,legend数据
          this.resultValue = info.data.resultValue
          // 最小的计数器的key
          // this.minKey = info.data.minKey
          this.timeMap = info.data.timeMap

          // 处理数据， 这里用的是浅拷贝，其实还是更改的请求返回来的数据
          const originalData = info.data.originalData[0]
          for (const k in originalData) {
            const num = Math.ceil(originalData[k].length / 10)
            for (let i = 0; i < num; i++) {
              originalData[k].unshift(0)
            }
          }
          
          this.tableList = info.data.originalData
          this.originalData = {
            ...formatData(info.data.originalData[0]),
          }
          // const result = this.$setGrapData(info.data.originalData[0])
          // this.originalData = result.resultList
          // this.waveName = result.keyList
          // this.originalData = info.data.originalData
          this.paramResult = info.data.paramResult
          this.dissociation = info.data.dissociation
          this.dissType = info.data.extB
          if (this.isRepeatSubmit) {
            setStore('auuid', info.data.uuid)
          }

          //v1是旧表，v2是新表
          if (this.dissType === 'v1') {
            this.lightRate = info.data.lightRate
            this.stepTwoList = []
            this.stepTwoList = info.data.finalResult

            this.imgList = info.data.imgList
            this.extA = info.data.extA
            let loctionTitle = info.data.unitTitle
            loctionTitle.forEach((item) => {
              let title = []
              item.forEach((titleItem, index) => {
                if (index === 4) {
                  const sub = `K<sub>a</sub>(10<sup>${titleItem}</sup>M<sup>-1</sup>S<sup>-1</sup>)`
                  title.push(sub)
                } else if (index === 5) {
                  const sub = `K<sub>d</sub>(10<sup>${titleItem}</sup>S<sup>-1</sup>)`
                  title.push(sub)
                } else if (index === 6) {
                  const sub = `K<sub>D</sub>(10<sup>${titleItem}</sup>S<sup>-1</sup>)`
                  title.push(sub)
                } else {
                  title.push(titleItem)
                }
              })
              const data = {}
              data.equa = title
              this.unitTitle.push(data)
            })

            this.stepTwoList.forEach((dataListItem) => {
              for (let i in dataListItem) {
                if (dataListItem[i].indexOf(this.extA) === 0) {
                  this.parameter = dataListItem[i]
                }
              }
            })
            const stepTwoTitle = { title: this.unitTitle[0].equa }
            this.stepTwoList.unshift(stepTwoTitle)
            this.stepTwoList.map((listItem) => {
              for (let i in listItem) {
                listItem[i].splice(1, 3)
              }
            })
          }

          // this.newDrawChart()
          let _this = this
          _this.$nextTick(() => {
            setTimeout(() => {

              _this.imgUpLoad(info.data.computeCrpValue.value)
              _this.doDownload = true
            }, 3000)
          })

          this.isShowInputLog = false
          this.isShowStepOne = true
          this.isShowStepTwo = true
        } 
        this.computeLoading = false
        this.isShowLoading = false
        this.isResetLoading = false
      }
    },

    /* 生成excali表格 */
    async imgUpLoad(value) {
      await fetchUploadExl({
        crpValue: value,
        uuid: getStore('auuid'),
        mole: this.mole,
        imgBase64: this.baseStepOne,
      })
    },

    // 全部清楚数据
    handleRemove() {
      this.$refs['rebateUpload'].clearFiles() //清除文件
      this.uploadExcel.excel1 = null  //清除文件
      this.uploadExcel.excel2 = null  //清除文件
      this.uploadFile = {}
      this.isShowExcel = 'true'

      // 调用子组件清除文件
      // this.$refs.secondUpload.handleRemove()

      //上传框
      this.isShowUpload = true
      this.isShowUploadtxt = false
      //可以计算
      this.computeAllowed = true
      this.computeLoading = false
      //上传进度条
      this.percentage = 0
      //显示进度
      this.isShowPer = false
      this.paramResult = []
      this.originalData = {}
      this.stepTwoList = []
      this.allStepOneCharts = []
      this.isShowStepOne = false
      this.isShowStepTwo = false
      this.isShowInputLog = false
      this.doDownload = false
      this.baseStepOne = []
      this.beforeLable = []
      this.unit = 'μg/ml'
      this.mole = '115207373'
    },

    sortObj(obj) {
      var arr = []
      for (var i in obj) {
        arr.push([obj[i], i])
      }
      arr.reverse()
      var len = arr.length
      var obj = {}
      for (var i = 0; i < len; i++) {
        obj[arr[i][1]] = arr[i][0]
      }
      return obj
    },

    downloadExl() {
      if (this.isShowStepTwo && this.doDownload) {
        let lang = this.lang === 'zh' ? 'CN' : 'ENG'
        const href = `${
          process.env.BASE_URL
        }receive/download/excel/6/${lang}/${getStore('auuid')}`
        window.open(href, '_blank')
      } else {
        this.$message({
          type: 'error',
          message: this.$t('page.doDownload'),
        })
      }
    },

    opens() {
      setTimeout(() => {
        let triggerResize = new Event('resize')
        window.dispatchEvent(triggerResize)
      }, 0)
    },

    // legend返回title部分
    getLegendValue(val) {
      // 标签 > 浓度 > 孔号
      const { key = [], data1 = []} = this.resultValue
      const index = key.findIndex(item => item === val)
      let str = ''
      const result1 = data1.some(item => item)
      if(result1) {
        str = data1[index]
        this.tooltipList = data1
      } else {
        str = val
        this.tooltipList = key
      }
      return str
    },

    shotImg(index, data) {
      this.baseStepOne[index] = data
    },
  },
  computed: {
    // upload: () => {
    //   return `${process.env.BASE_URL}receive/affinity/upload/nanosStep1`
    // },
    headerUpload: () => {
      const data = {}
      data.TOKEN = getToken()
      if (localStorage.getItem('spr-lang') === 'en') {
        data.LANG = 'ENG' // 传语言
      }
      return data
    },
  },
}
</script>

<style lang="scss" scoped>
@import "src/styles/mixin.scss";
.upload-box {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}
.upload-btn {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  /deep/ .el-button--primary {
    width: 160px;
    
  }
}
.space {
  display: flex;
  margin: 0;
  .space-title,
  .label-title {
    width: 150px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .space-title::before {
    content: '*';
    color: red;
    margin-right: 2px;
  }
}
.space-unit {
  margin-bottom: 20px;
}
.space-btn {
  margin-left: 250px;
}
table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
}
.reset-back {
  display: flex;
  align-items: center;
  margin: 0 20px 20px;
  .link {
    cursor: pointer;
    color: #409eff;
    font-style: normal;
    margin-right: 20px;
  }
}
.img-list {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  width: 500px;
}

#table-2 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
}
#table-2 tr {
  border: 1px solid #000 !important;
}

#table-2 td:first-child {
  border-left: 1px solid #000;
}

// 计数器部分的样式
.each-numberBox {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  .computed-text {
    width: 80px;
    margin-right: 6px;
    text-align: end;
    .computed-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
}

.line-box {
  display: flex;
  overflow: auto;
  margin-top: 40px;
  @include scrollBar
}
/* Padding and font style */
#table-2 td,
#table-2 th {
  padding: 10px 15px;
  font-size: 12px;
  font-family: Verdana;
  border-right-width: 1px;
  border-right-style: solid;
}

.data-item {
  display: block;
}

@media screen and (min-width: 1000px) {
  .data-item {
    display: inline-block;
    margin-right: 20px;
  }
}
.space-time {
  display: flex;
}
</style>